/**
 * 各种设备简图：Play, Pause,Stop,Next,...
 * 需要调整尺寸的时候只需要设置font-size即可等比缩放
 * 主控参数默认值 font-size: $U20;
 * PS：这里没有线宽的概念，只有等比缩放。
 */

//*-- iMac --*\\
.icono-imac{
    width: $U28;
    height: $U24;
    @extend .icono-stroke;
    border-width: $U2 $U2 $U6;
    border-color: transparent;
    border-radius: $U3;
    box-shadow: 0 0 0 $U1, 0 0 0 $U1 inset;
    margin: $U3 $U3 $U7;
    &:before{
        position: absolute;
        height: $U4;
        right: -1*$U3;
        left: -1*$U3;
        bottom: -1*$U6;
        box-shadow: inset 0 0 0 $U32;
        border-radius: 0 0 $U3 $U3;
    }
    &:after{
        width: $U9;
        height: $U7;
        @extend .stickCenterH;
        box-shadow: inset 0 0 0 $U32;
        bottom: -1*$U12;
        border-radius: $U32 $U32 0 0 #{'/'} 2*$U32;
    }
}
.icono-imacBold{
    width: $U28;
    height: $U22;
    @extend .icono-stroke;
    border-radius: $U4;
    margin: $U4 $U3 $U8;
    &:before{
        width: $U9;
        height: $U7;
        @extend .stickCenterH;
        box-shadow: inset 0 0 0 $U32;
        bottom: -1*$U6;
        border-radius: $U32 $U32 0 0 #{'/'} 2*$U32;
    }
    &:after{
        width: $U24;
        height: $U3;
        @extend .stickCenterH;
        box-shadow: inset 0 0 0 $U32;
        bottom: 0;
    }
}

//*-- iPhone --*\\
.icono-iphone{
    width: $U19;
    height: $U31;
    @extend .icono-stroke;
    border-radius: $U3;
    border-width: $U5 $U1;
    border-color: transparent;
    box-shadow: 0 0 0 $U1, 0 0 0 $U1 inset;
    margin: $U2 $U8 $U1 $U7;
    &:before, &:after{
        @extend .stickCenterH;
        box-shadow: inset 0 0 0 $U32;
    }
    &:before{
        width: $U3;
        height: $U1;
        top: -1*$U3;
    }
    &:after{
        width: $U3;
        height: $U3;
        bottom: -1*$U4;
        border-radius: 50%;
    }
}
.icono-iphoneBold{
    width: $U20;
    height: $U32;
    margin: $U1 $U7;
    border-radius: $U4;
    @extend .icono-stroke;
    border-width: $U5 $U2;
}

//*-- Macbook --*\\
.icono-macbook{
    width: $U32;
    height: $U2;
    box-shadow: inset 0 0 0 $U32;
    border-radius: 0 0 $U32 $U32 #{'/'} $U3;
    margin: $U25 $U1 $U7 $U1;
    &:before{
        width: $U20;
        height: $U14;
        @extend .icono-stroke;
        @extend .stickCenterH;
        bottom: $U2;
        border-width: $U3 $U1 $U1 $U1;
        border-color: transparent;
        border-radius: $U3 $U3 0 0;
        box-shadow: 0 0 0 $U1, 0 0 0 $U1 inset;
    }
}
.icono-macbookBold{
    width: $U32;
    height: $U2;
    box-shadow: inset 0 0 0 $U32;
    margin: $U25 $U1 $U7 $U1;
    &:before{
        width: $U20;
        height: $U14;
        @extend .stickCenterH;
        bottom: $U2;
        @extend .icono-stroke;
        border-width: $U3 $U2 $U1;
        border-radius: $U3 $U3 0 0;
    }
}

//*-- Nexus --*\\
.icono-nexus{
    width: $U21;
    height: $U32;
    @extend .icono-stroke;
    border-width: $U3 $U1;
    border-radius: $U16 #{'/'} $U3;
    margin: $U1 $U7 $U1 $U6;
}